

<template>
  <!-- <div class="codeContainer" v-show="isShow">
    <div class="code">
      <span>代码实现(c++)</span><br>
      void BubbleSort(int arr[], int n) {<br>
    for (int i = 0; i < n - 1; i++) {<br>
    for (int j = 0; j < n - i - 1; j++) {<br>
    if (arr[j] > arr[j + 1]) {<br>
    int temp = arr[j];<br>
      arr[j] = arr[j + 1];<br>
    arr[j + 1] = temp;
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}}}} <br>
    </div>
 





  </div> -->
  <div class="container" v-show="isShow">
    <el-input
  v-model="arrayIn"
  placeholder="请输入需要排序的数组"
  class="inputArray"
  clearable
/>
<el-button type="primary" class="butt" @click="getValue">完成</el-button>
<el-button type="primary" class="butt" @click="startSorting">排序</el-button>
<!-- 代码展示 -->
<el-button @click="visible = true" class="codeBut" plain type="warning">
    <b>代码实现</b>
  </el-button>
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass"><b>代码实现(c++)</b></h4>
      <el-button type="danger" @click="close" >
        <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
        Close
      </el-button>
    </template>
    <div class="code">
    void BubbleSort(int arr[], int n) {<br>
    for (int i = 0; i < n - 1; i++) {<br>
    for (int j = 0; j < n - i - 1; j++) {<br>
    if (arr[j] > arr[j + 1]) {<br>
    int temp = arr[j];<br>
      arr[j] = arr[j + 1];<br>
    arr[j + 1] = temp;
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}}}} <br>
    </div>

  </el-drawer>
<div class="caption">
  <div class="spa">操作数:{{operand}}  &nbsp&nbsp{{symbol}}&nbsp&nbsp&nbsp  比较数:{{ comparand }}</div>
  <div class="spa"> 总比较次数：{{sum}} </div>
</div>

<transition-group name="list" tag="div" class="arrayContainer">  
    <div  
      v-for="(item, index) in arr"  
      :key="item.value"  
      :style="{ height: item.len, width: '50px', backgroundColor: item.color }"  
      class="child"  
    >  
    <div class="numb">
      {{item.value  }}
    </div>
    </div>  
  </transition-group>  
  
  </div>

</template>

<script setup>
import { ref,watch } from 'vue'
const visible = ref(false);
const sorting = ref(false);  
const arrayIn = ref('');
const operand = ref('');
const comparand = ref('');
const sum = ref(0);
const symbol = ref("");
const isShow = ref(true);
// 获得输入框中的值
let arr = ref([]) // 初始化为空数组  
let maxNum = ref(0) // 用于存储最大数  
// delay函数返回一个promise能够让下面的循环在循环体内部停止一段时间的循环
function delay(ms) {  
  return new Promise(resolve => setTimeout(resolve, ms));  
}  
const getValue = async() => {  
  arr.value = []
  sum.value = 0 
  operand.value = ''
  comparand.value = ''
  symbol.value = "";
  await delay(1000)
const numbers = arrayIn.value.split(/,|，|\s+/).map(item => parseInt(item, 10))  
maxNum.value = Math.max(...numbers) // 计算最大数  
arr.value = numbers.map(item => ({  
  value: item,  
  len: `${(item / maxNum.value) * 320+20}px`, // 假设.arrayContainer的高度为400px，80%即为320px，然后按比例计算  
  color:"#6FD8D6"
}))  
console.log(arr.value);

}  

const startSorting = () => {  
if (!sorting.value) {  
  sorting.value = true;  
  sortArray();  
}  
};  

const sortArray = async () => {  
const len = arr.value.length;  
for (let i = 0; i < len - 1; i++) {  
  for (let j = 0; j < len - 1 - i; j++) {  
    operand.value = arr.value[j].value;
    comparand.value = arr.value[j+1].value;
    sum.value++;
    arr.value[j].color = "#063";
    arr.value[j+1].color = "#063";
    if (arr.value[j].value > arr.value[j + 1].value ) {  
      // await swapElements(j, j + 1);  
      symbol.value = ">";
      [arr.value[j], arr.value[j + 1]] = [arr.value[j + 1], arr.value[j]];
      
      
      await delay(1000);   
    }  
    else if(arr.value[j].value === arr.value[j + 1].value){
        symbol.value = "=";
        await delay(1000); 
    }
    else if(arr.value[j].value < arr.value[j + 1].value){
        symbol.value = "<";
        await delay(1000); 
    }
    arr.value[j].color = "#6FD8D6";
    arr.value[j+1].color = "#6FD8D6";
  }  
}  
sorting.value = false;  
};  

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container{
  width: 100%;
  height: 100%;
  background-color: #adc6ff;
  position: relative;
}
.inputArray{
  margin-top: 20px;
  margin-left: 50px;
  width: 400px;
  height: 50px;
  border:5px solid black;
  border-radius: 5px;
}

.butt{
  margin-top: 20px;
  height: 48px;
  width: 40px;
  margin-left: 10px;
}

.arrayContainer{
  width: 80vw;
  height: 400px;
  background-color: whitesmoke;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-left: 50px;
  margin-top: 50px;
  border: 5px solid grey;
  border-radius: 10px;
}
.list-move {  
  transition: transform 1s;  
}  
  
/* 当元素被移除时应用的类 */  
.list-leave-active {  
  transition: all 0.5s;  
}  
  
/* 当元素被添加时应用的类 */  
.list-enter-active {  
  transition: all 0.5s;  
}  
  
/* 离开过渡的起始状态 */  
.list-leave-to {  
  transform: translateX(100%); /* 或者其他你想要的过渡效果 */  
  opacity: 0; /* 可选，用于淡出效果 */  
}  
  
/* 进入过渡的结束状态 */  
.list-enter {  
  transform: translateX(-100%); /* 反转的过渡效果 */  
  opacity: 0; /* 可选，用于淡入效果 */  
}

.numb{
  width: 100%;
  height: 20px;
  text-align: center;
  margin: 0 auto;
  bottom: 0;
  border-radius: 5px 5px 0 0 ;
  border: none;
}

.child{
 border-radius: 5px 5px 0 0 ;
}

.caption{
  width: 1500px;
  height: 100px;
  margin-left: 50px;
  margin-top: 100px;
}

.spa{
  text-align: center;
  font-size: 30px;
  width: 1500px;
  height: 50px;
}

.codeContainer{
  width: 100%;
  height: 100%;
  background-color: #66ccff;
}

.code{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
}

.codeBut{
  width: 150px;
  height: 70px;
  right: 0;
  margin-top: 30px;
  margin-left: 40vw;
  font-size: 20px;
}
</style>

<!-- 展示代码 -->